<!doctype html>
<html lang="en">
<!--引入Thymeleaf。后续需要处理的动态内容都需要加上"th:"前缀。-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>thymeleaf</title>
    <!-- 通过"@{}"引入静态文件，默认原则，文件放在src/main/resources/static下 -->
    <link rel="stylesheet" type="text/css" th:href="@{css/a.css}" />
    <script th:src="@{js/a.js}"></script>

    <!-- 在JavaScript中访问model，使用 "[[dollar{}]]" 格式。且需要在script标签设置th:inline="javascript"才可实现访问。 -->
    <script th:inline="javascript">
        var single = [[${person}]];
        console.log(single.name+"/"+single.age)
    </script>

</head>
<body>
    <!-- 通过dollar{}访问model中的属性 -->
    <p th:text="${name}"></p>
    <p th:text="${person.name}"></p>
    <!-- list数据判断和迭代 -->
    <div th:if="not ${#lists.isEmpty(plist)}">
        <ul class="list-group">
            <li th:each="person:${plist}">
                <span th:text="${person.name}"></span>
                <span th:text="${person.age}"></span>
            </li>
        </ul>
    </div>
</body>
</html>